<template>
	<view>
		<view class="bartop"></view>
		<view class="cu-bar">
			<view class="action">
				<text class="cuIcon-back text-gray" @tap="goBack"></text> 返回
			</view>
			<view class="text-lg text-bold">
				支领单详情
			</view>
			<!-- <view v-if="isexamine == 0" class="action">
				<text class="text-lg" style="color: #13227a;" @tap="approveForm">审批</text>
			</view> -->
			<view class="action"></view>

		</view>
		<view class="cu-list menu">
			<view class="cu-item">
				<text>支领单编号：</text>
				<text>{{zlnumber}}</text>
			</view>
			<view class="cu-item">
				<text>备货状态：</text>
				<text>{{hstate}}</text>
			</view>
			<view class="cu-item">
				<text>领料状态：</text>
				<text>{{lstate}}</text>
			</view>
			<view class="cu-item">
				<text>组装状态：</text>
				<text>{{zstate}}</text>
			</view>
			<view class="cu-item">
				<text>领料人：</text>
				<text>{{name}}</text>
			</view>
		</view>
		<view class="btn-group margin-top flex justify-between">
			<view class="button-content">
				<button class="bg-red round text-xs" @click="delForm">删除</button>
			</view>
			<view class="button-content">
				<button class="bg-purple round text-xs" @click="changeForm">修改</button>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Edit'? 'show' : ''" style="z-index: 99;">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改支领单</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl border">
					<input placeholder="请输入支领单编号" type="" v-model="zlnumber">
				</view>
				<view class="cu-form-group">
					<view class="title">支领人</view>
					<picker v-if="operator.types" @change="OperatorChange" :name="operator.key"
						:value="operator.newindex" :range="operator.types" range-key="trueName">
						<view v-if="operator.newindex == -1" class="picker">
							请选择支领人
						</view>
						<view v-else class="picker">
							{{ operator.types[operator.newindex].trueName }}
						</view>
					</picker>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-purple" @tap="hideModal">取消</button>
						<button class="cu-btn bg-purple margin-left" @tap="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null, // id
				zlnumber: null,
				bhstate: null,
				userid: null,
				zlstate: null,
				zzstate: null,
				hstate: null,
				lstate: null,
				zstate: null,
				name: null,
				detailData: null,
				modalName: null,
				operator: {
					newindex: -1,
					key: 'operator',
					types: []
				},
			}
		},
		methods: {
			onShow() {
				this.getFormDetail()
			},
			onLoad(options) {
				this.id = options.id
				this.getOperator()
			},

			getFormDetail() {
				this.$Request.postPHP(this.$httpApi.claim.getonce + "?id=" +
					this.id).then(res => {
					if (res.code == 200) {
						let data = res.data[0]
						console.log(data)
						this.detailData = data
						this.id = data.id
						this.zlnumber = data.zlnumber
						this.bhstate = data.bhstate
						this.userid = data.userid
						this.zlstate = data.zlstate
						this.zzstate = data.zzstate
						this.hstate = data.hstate
						this.lstate = data.lstate
						this.zstate = data.zstate
						this.name = data.name

					}
				})
			},
			getOperator() {
				this.$Request.get(this.$httpApi.operator.findAssembleDirector).then(res => {
					if (res.code == 200) {
						this.operator.types = res.data
					}
				})
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			hideModal(e) {
				this.modalName = null
			},
			changeForm() {
				this.modalName = "Edit"
			},
			confirmModal(e) {
				let userid = 0
				if (this.operator.newindex != -1) {
					userid = this.operator.types[this.operator.newindex].userId
				} else {
					uni.showToast({
						title: "请选择支领人",
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.zlnumber == null) {
					uni.showToast({
						title: "请填写支领单编号",
						icon: 'none',
						duration: 2000
					});
					return
				}
				// this.hideModal()
				let url = this.$httpApi.claim.edit + "?id=" + this.id + "&userid=" + userid + "&zlnumber=" + this.zlnumber
				this.$Request.postPHP(url).then(res => {
					this.hideModal()
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							icon: 'none',
							duration: 2000
						});
						this.getFormDetail()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})

			},
			approveForm() {
				this.confirmModal()
			},
			OperatorChange(e) {
				this.operator.newindex = e.detail.value
				console.log(this.operator.newindex)

			},
			delForm() {
				uni.showModal({
					title: '提示',
					content: '确认删除该支领单?',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字
					showCancel: true,
					success: ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							this.$Request.postPHP(this.$httpApi.claim.del + "?id=" + this.id).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: '2|success,none|',
										mask: true
									})
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										});
									}, 1500);

								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
										mask: true
									})
								}
							})
						};
					}
				})
			}
		}
	}
</script>

<style>
	.cu-list.menu>.cu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 60rpx;
	}

	.button-content {
		width: 50%;
	}

	button {
		width: 60%;
	}

	image {
		/* width: 50rpx; */
		height: 80rpx;
		/* position: absolute; */
		right: 0;
		top: -15rpx
	}
</style>
